<template>
	<div class="page-wrap" data-title="用户详情页面">
		<div class="page-top">
			<user_detail_info />
		</div>
		<div class="page-bottom">
			<div class="page-ctx">
				<div class="user-add-assets">
					<el-button type="primary" @click="doAddAssets()">
						调整资产
					</el-button>
				</div>

				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="余额记录" name="余额记录">
						<div class="panel-item" data-title="余额记录">
							<user_detail_balance ref="user_detail_balance" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="积分记录" name="积分记录">
						<div class="panel-item" data-title="积分记录">
							<user_detail_points ref="user_detail_points" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="代理记录" name="代理记录">
						<div class="panel-item" data-title="代理记录">
							<user_detail_daili ref="user_detail_daili" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="客户记录" name="客户记录">
						<div class="panel-item" data-title="客户记录">
							<user_detail_fans ref="user_detail_fans" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="佣金记录" name="佣金记录">
						<div class="panel-item" data-title="佣金记录">
							<user_detail_commission ref="user_detail_commission" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="信用记录" name="信用记录">
						<div class="panel-item" data-title="信用记录">
							<user_detail_credit ref="user_detail_credit" />
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>

		</div>

		<user_assets_modal ref="user_assets_modal" @confirm="confirmSetAssets" />
	</div>
</template>

<script>
import user_detail_info from './user-detail/user-detail-info.vue';
import user_detail_balance from './user-detail/user-detail-balance.vue';
import user_detail_points from './user-detail/user-detail-points.vue';
import user_detail_fans from './user-detail/user-detail-fans.vue';
import user_detail_daili from './user-detail/user-detail-daili.vue';

import user_detail_commission from './user-detail/user-detail-commission.vue';
import user_detail_credit from './user-detail/user-detail-credit.vue';


import user_assets_modal from '@/components/user/user_assets_modal.vue';
import {
	mapState
} from "vuex";
export default {
	name: "user-detail",
	components: {
		user_detail_info,
		user_detail_balance,
		user_detail_points,
		user_detail_fans,
		user_detail_daili,
		user_detail_commission,
		user_detail_credit,

		user_assets_modal,
	},
	data() {
		return {
			id: this.$route.query.id || '',
			info: {

			},
			activeName: "余额记录",
			//
		};
	},
	computed: {},
	watch: {},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		},
		setView() {
			// this.$api({
			// 	url: "",
			// 	method: "get",
			// 	data: {
			// 		action: 'users_detail',
			// 		id: this.id
			// 	},
			// }).then((res) => {
			// 	// console.warn("新闻详情", res);
			// 	if (res.code == 200) {
			// 		this.info = res.data
			// 	}
			// });
		},

		doAddAssets() {
			this.$refs.user_assets_modal.init({
				id: this.id
			})
		},
		confirmSetAssets() {
			this.do_user_assets_list_refresh()
		},
		do_user_assets_list_refresh() {
			if (this.activeName == '余额记录') {
				this.$refs.user_detail_balance.setView()
			} else if (this.activeName == '积分记录') {
				this.$refs.user_detail_points.setView()
			} else if (this.activeName == '代理记录') {
				this.$refs.user_detail_daili.setView()
			}else if (this.activeName == '客户记录') {
				this.$refs.user_detail_fans.setView()
			} else if (this.activeName == '佣金记录') {
				this.$refs.user_detail_commission.setView()
			} else if (this.activeName == '信用记录') {
				this.$refs.user_detail_credit.setView()
			}
		}
	},
};
</script>

<style scoped lang="less">
.page-wrap {
	.page-inner {}
}

.page-bottom {
	margin-bottom: 10px;
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.page-ctx {
	position: relative;

	.user-add-assets {
		z-index: 10;
		position: absolute;
		right: 0;
		top: 0;
	}
}
</style>